<script setup lang="tsx">
const model = defineModel<any>('model', { required: true });
interface Emits {
  (e: 'search', model: any): void;
  (e: 'reset', model: any): void;
}
const emit = defineEmits<Emits>();

function search() {
  emit('search', model.value);
}
function reset() {
  model.value.equipmentName = null;
  emit('reset', model.value);
}
</script>

<template>
  <ACard :title="null" :bordered="false">
    <AForm
      :model="model"
      :label-col="{
        span: 5
      }"
      class="search-yang"
    >
      <!-- 搜索内容框划分 -->
      <div>
        <ARow :gutter="[15, 8]" wrap>
          <ACol :span="24" :md="12" :lg="6" :xl="8" :xxl="4">
            <AFormItem label="设备名称" name="equipmentName">
              <AInput v-model:value="model.equipmentName" />
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="8" :xxl="4">
            <AFormItem label="Activity zone" name="region">
              <ASelect v-model:value="model.region" placeholder="please select your zone">
                <ASelectOption value="shanghai">Zone one</ASelectOption>
                <ASelectOption value="beijing">Zone two</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="8" :xxl="4">
            <AFormItem label="Activity name" name="requitid">
              <AInput v-model:value="model.requitid" />
            </AFormItem>
          </ACol>
          <!-- 搜索重置按钮 -->
          <div>
            <AFormItem>
              <div>
                <AButton type="primary" ghost @click="search">
                  <template #icon></template>
                  <span>搜索</span>
                </AButton>
                <AButton type="primary" ghost @click="reset">
                  <template #icon></template>
                  <span>重置</span>
                </AButton>
              </div>
            </AFormItem>
          </div>
        </ARow>
      </div>
    </AForm>
  </ACard>
</template>

<style scoped lang="scss"></style>
